<template>
    <div style="padding: 20px; background-color: #f9f9f9; min-height: 100vh;">
    <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#e6f7ff', color: '#333' }">
        <el-table-column type="index" label="序号" width="80" ></el-table-column>
        <el-table-column prop="invoicingCode" label="到票单号" width="180" />
        <el-table-column prop="invoicingName" label="到票主题" width="180" />
        <el-table-column prop="invoicingType" label="到票类型" width="180" />
        <el-table-column prop="invoicingDate" label="到票时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.invoicingDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="invoicingMomeny" label="到票金额" width="180" />
        <el-table-column prop="receiveInvoicing" label="到票方" width="180" />
        <el-table-column prop="invoicingDesc" label="备注" />
      </el-table>
      <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[10, 20, 50, 100]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.TotalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 格式化日期
const formatDate = (dateStr: string): string => {
  return new Date(dateStr).toLocaleString();
};
const tableData = ref([{
      "id": null,
      "invoicingCode": "",
      "invoicingName": "",
      "invoicingType": "",
      "invoicingDate": "",
      "invoicingMomeny": 0,
      "receiveInvoicing": "",
      "invoicingDesc": ""
}]);
// 初始化分页参数
const page = ref({
  PageIndex: 1,
  PageSize: 10,
  TotalCount: 0
});
// 监听每页大小变化
const handleSizeChange = (val: number) => {
  page.value.PageSize = val;
  page.value.PageIndex = 1; // 切换页面大小时重置为第一页
  getTableData();
};

// 监听当前页变化
const handleCurrentChange = (val: number) => {
  page.value.PageIndex = val;
  getTableData();
};
const getTableData=()=>{
    axios.get('/api/InvoiceTicket/GetInvoicings',{params:page.value}).then(res=>{
        tableData.value=res.data.totalPage;

        page.value.TotalCount=res.data.totalcount;
    })
}
onMounted(()=>{
    getTableData();
})
</script>
